<template>
  <div class="talent-item" v-for="(item,index) in talentList" :key="index" @click="gotoDetail(item.id)">
    <div class="talent-item-top">
      <div class="talent-item-pic">
        <img src="@/assets/img/icon/icon-message.png" alt="">
      </div>
      <div class="talent-item-cont">
        <h3>理想<span>驻场</span><span>远程</span><span>全职</span></h3>
        <p>前端工程师 | 5年 | 本科 | 23岁</p>
        <dl>
          <dt>vue</dt>
          <dt>nodejs</dt>
          <dt>小程序</dt>
        </dl>
      </div>
    
    </div>
    <div class="talent-item-bottom"></div>
  </div>
</template>

<script setup lang="ts">
import { useRouter } from "vue-router";
// 接收父组件的参数
const props = defineProps({
  talentList: {
    type: Array,
    default: () => [],
  },
});
const router = useRouter();
const gotoDetail = (id: Number) => {
  router.push("/talent/details/" + id);
};
</script>

<style scoped>
.talent-item{ 
  margin: 0 0.64rem 0.53rem;
  padding: 0.77rem 0.64rem 0;
  background: #fff;
  border-radius: 0.53rem;
}
.talent-item-top{
  display: flex;
  padding-bottom: 0.75rem;
  background: 1px solid #f5f5f5;
}
.talent-item-pic{
  width: 4rem;
  height: 4rem;
  border-radius: .27rem;
  overflow: hidden;
  margin-right: .85rem;
}
.talent-item-pic img{
width: 100%;
height: 100%;
}
.talent-item-cont{}
.talent-item-cont h3{
  font-size: .91rem;
  font-weight: 400;
  color: #333;
  display: flex;
  align-items: center;
  margin-bottom: .64rem;
}
.talent-item-cont h3 span{
  widows: 1.97rem;
  height: .85rem;
  border-radius: .53rem;
  line-height: .85rem;
  font-size: .59rem;
  font-weight: 300;
  color: #fff;
  margin-left: .2rem;
  text-align: center;
  padding: .1rem 0;
}
.talent-item-cont p{
  font-size: .69rem;
  line-height: .69rem;
  font-weight: 100;
  color: #666;
  margin-bottom: .56rem;
}
dl{
  display: flex;
}
dl dt{
  padding: .3rem .5rem;
  font-size: .59rem;
  line-height: .59rem;
  font-weight: 300;
  color: #666;
  margin-right: .27rem;
}
.talent-item-bottom {
  display: flex;
  padding:.72rem 0 .72rem;
}
.talent-item-bottom label{
  flex: 1;
}
.talent-item-bottom span{
  text-align: right;
}
.talent-item-bottom i{
  font-size: .8rem;
  font-weight: 600;
  margin-right: .1rem;
}

</style>
